<template>
  <div>
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.back()" />

    <section>
      <van-tabs scrollspy sticky :color="CFG.colorPrimary" :title-active-color="CFG.colorPrimary">
        <van-tab title="商品">
          <section class="albums">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in albums" :key="index"><img v-lazy="image" class="img-lazy" /></van-swipe-item>
            </van-swipe>
          </section>

          <section class="info mb10">
            <div class="left">
              <div class="title">{{ goods.title }}</div>
              <div class="price" v-if="goods.price > 0">￥{{ goods.price }}</div>
              <div class="price" v-if="goods.pay_points > 0">兑换积分值 {{ goods.pay_points }}</div>
              <div class="quantity" v-if="goods.quantity == 0">无货</div>
              <div class="quantity" v-else-if="goods.quantity < 100">存存紧张</div>
            </div>

            <div class="right" @click="share" v-if="false"><i class="iconfont icon-fenxiang"></i></div>
          </section>
        </van-tab>

        <van-tab title="评价">
          <section class="goods-comment mb10" v-show="evaluateLists.length">
            <van-cell title="商品评价" style="font-weight: bold;" is-link value="全部评价" @click="goEvaluateLists()" />

            <van-cell v-for="evaluate in evaluateLists" :key="evaluate.id">
              <div class="comment-title">
                <img class="avatar" :src="evaluate.avatar" />
                <div class="nickname">{{ evaluate.nickname }}</div>
                <div class="rate"><van-rate v-model="evaluate.rank" :size="14" color="$colorPrimay" void-icon="star" void-color="#eee" /></div>
              </div>
              <div class="comment-content">{{ evaluate.content }}</div>
            </van-cell>
          </section>

          <section class="goods-comment mb10" v-show="evaluateLists.length == 0">
            <van-cell title="暂无商品评价" style="font-weight: bold; padding-top: 15px; padding-bottom: 15px;" />
          </section>
        </van-tab>
        <van-tab title="详情">
          <section class="instruction">
            <van-cell value="商品详情" style="font-weight: bold;" />
            <lazy-component><img v-for="img in contentImages" :key="img.id" v-lazy="img" class="img-lazy" /></lazy-component>
          </section>
        </van-tab>
      </van-tabs>
    </section>

    <footer class="footer" v-if="goods.pay_points === 0">
      <van-goods-action>
        <van-goods-action-icon icon="wap-home-o" text="首页" @click="$router.push('/home')" />
        <van-goods-action-icon icon="service-o" text="客服" @click="dialogShow = true" />
        <van-goods-action-icon icon="cart-o" text="购物车" :info="counter" @click="$router.push('/cart')" />
        <van-goods-action-button color="#333333" :disabled="goods.quantity == 0" @click="addGoodsToCart" text="加入购物车" />
        <van-goods-action-button :color="CFG.colorPrimary" :disabled="goods.quantity == 0" text="立即购买" @click="quickBuy" />
      </van-goods-action>
    </footer>

    <div class="alertBox" v-if="dialogShow">
      <div class="bg"></div>
      <div class="alert">
        <div class="alertHeader">
          <i class="iconfont icon-kefunv"></i>
          <div class="title">客服中心</div>
          <div class="info">Hi！请问您需要什么帮助？</div>
        </div>
        <div class="alertContent">
          <a class="btn btn-primary mb10" :href="'tel:4006567921'">贵宾热线：4006000000</a>
          <div class="btn" @click="dialogShow = false">取消</div>
        </div>
        <i class="iconfont icon-guanbi1 close" @click="dialogShow = false"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

import { mapActions, mapGetters } from 'vuex';

import { Tab, Tabs } from 'vant';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      dialogShow: false,
      albums: [],
      contentImages: [],
      goods_id: 0,
      goods: {
        quantity: 0
      },
      evaluateLists: [],
      cartItems: {
        id: 0,
        image: '',
        title: '',
        price: 0
      }
    };
  },
  created() {
    this.goods_id = this.$route.query.goods_id;
    this.loadGoods(this.goods_id);
  },
  computed: {
    ...mapGetters(['carList', 'allMoney']),
    counter() {
      //console.log(this.carList);

      let that = this;

      let c = 0;
      // 检查当前商品 在购物车里 有几件
      this.carList.some(item => {
        console.log(item.productId + ':' + that.goods_id);

        if (item.productId == that.goods_id) {
          c += item.num;
        }
      });

      return c > 0 ? c : '';
    }
  },


  methods: {

    ...mapActions(['addGoods', 'addNum']),

    // 分享
    // 一直有问题，分享没反应
    share() {
      let _url = '';
      if (window.__wxjs_is_wkwebview === true) {
        _url = window.location.href.split('#')[0] || window.location.href;
      } else {
        _url = window.location.href;
      }

      let that = this

      this.apiPost('/shop.everyone/wx_jssdk_sign', { url: _url }).then(res => {
        this.wxshare(res.data, _url);
      });
    },

    wxshare(data, url){

      wx.config({
          debug: true,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: [
              'onMenuShareAppMessage',
              'onMenuShareTimeline'
          ]
      });

      wx.ready(function() {

          wx.onMenuShareTimeline({
              title: this.goods.title,
              desc: this.goods.title,
              link: url,
              imgUrl: this.goods.image
          });
          wx.onMenuShareAppMessage({
              title: this.goods.title,
              desc: this.goods.title,
              link: url,
              imgUrl: this.goods.image
          });

      });

    },

    // 去往评论列表
    goEvaluateLists() {
      this.$router.push({
        path: '/goodsEvaluateLists',
        query: {
          goods_id: this.$route.query.goods_id
        }
      });
    },
    //直接下单
    quickBuy() {
      if (this.counter > 0) {
        this.$router.push('/cart');
      } else {
        this.addGoods(this.cartItems);
        this.$router.push('/cart');
      }
    },
    addGoodsToCart() {
      if (this.counter > 0) {
        //this.$store.commit('ADDNUM', this.cartItems.id);
        this.addNum(this.cartItems.id);
      } else {
        this.addGoods(this.cartItems);
        //this.$store.commit('ADDGOODS', this.cartItems);
      }
    },
    loadGoods(goods_id) {
      this.apiPost('/shop.goods/read', { goods_id: goods_id }).then(res => {
        this.albums = res.data.albums;
        this.contentImages = res.data.contentImages;
        this.goods = res.data;

        // 购物车专用
        this.cartItems.id = this.goods.id;
        this.cartItems.image = this.goods.image;
        this.cartItems.title = this.goods.title;
        this.cartItems.price = this.goods.price;

        this.evaluateLists = res.data.evaluateLists;
      });
    }
  }
 };
</script>

<style lang="scss" scoped>
@import '@/assets/scss/variable.scss';

.alertBox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 99;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: -1;
  }
  .alert {
    font-size: 13px;

    .alertHeader {
      margin-bottom: 30px;
      i.iconfont {
        font-size: 60px;
      }
      .title {
        font-weight: bold;
      }
      .info {
        color: #8f8f8f;
      }
    }

    text-align: center;
    position: absolute;
    padding: 10px;
    top: 50%;
    left: 50%;
    width: 80%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    .close {
      top: -30px;
      right: 0px;
      position: absolute;
      color: white;
      font-size: 24px;
    }
  }
}

#dialog {
  border-radius: 15px;
  text-align: center;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: white;
}
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

img.img-lazy {
  width: 100%;
  min-height: 100px;
  box-sizing: border-box;
  display: block;
}

.goods-comment {
  background-color: #fff;

  .comment-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;

    img.avatar {
      width: 28px;
      height: 28px;
      margin-right: 10px;
      border-radius: 28px;
    }

    .nickname {
    }

    .rate {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -moz-box-flex: 1;
      flex: 1;
      text-align: right;
    }
  }

  .comment-content {
    color: #111;
    padding: 15px 0 5px 0;
    word-break: break-all;
  }
}

// .van-goods-action-button{
//    &--warning{
//      background-color: #333333!important;
//      color: white;
//    }
//    &--danger{
//      background-color: $colorPrimary;
//    }
//  }

.footer {
  width: 100%;
  height: 45px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #eee;
  background-color: #fff;

  .cartBtn {
    border: 0;
    font-size: 1.3rem;
    margin: 0 auto;
    display: block;
  }

  .cart-counter {
    position: absolute;
    z-index: 10;
    width: 25px;
    height: 20px;
    top: 5px;
    left: 35px;
    line-height: 20px;
    border-radius: 40%;
    background-color: red;
    color: #fff;
    font-size: 10px;
  }
}

.albums {
  img {
    max-width: 100%;
  }
}
.info {
  background-color: white;
  padding: 10px 20px;

  box-sizing: border-box;

  display: flex;

  .left {
    flex: 1;

    .title {
      color: black;
      font-weight: bold;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .price {
      color: $colorAccent;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .quantity {
      color: red;
      font-size: 12px;
    }
  }

  .right {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .iconfont {
      font-size: 30px;
      font-weight: bold;
      color: #a7a7a7;
    }
  }
}
</style>
